<!-- 盒柜 -->
<template>
  <view class="cabinet-container">
    <!-- tab -->
    <view class="tab-box">
      <uni-segmented-control :current="state.current" :values="tabs" style-type="text" active-color="#F34D37"
        @clickItem="onClickItem" />
    </view>
    <!-- tab 内容 -->
    <view class="tab-content">
      <view class="order-list" v-if="true">
        <template v-for="(goods, index) in [1,2,3,4,5,6,7,8]">
          <view class="order-item">
            <view class="goods-info">
              <view class="thumb-box">
                <image src="../../static/images/delete/g4.jpg"></image>
              </view>
              
              <view class="order-info">
                <view class="title">
                  商品标题
                </view>
                <view class="count">
                  数量：x1
                </view>
                <view class="price">
                  单价：<text>￥199.99</text>
                </view>
              </view>
            </view>
            <!-- 底部 -->
            <view class="btm-box">
              <view class="money-box">
                <text>合计：￥</text>
                <text>179.99</text>
              </view>
              
              <view class="btn-box">
                <button type="default" size="mini">取消订单</button>
                <button type="default" size="mini">查看物流</button>
                <button type="warn" size="mini">再次购买</button>
              </view>
            </view>
          </view>
        </template>
      </view>
      
      <view class="empty" v-else>
        <Empty text="还没有订单" />
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import Empty from '@/components/empty/empty.vue'

export default defineComponent({
  name: "Cabinet",
  components: {
    Empty
  },
  setup() {
    const state = reactive({
      current: 0,
      
    });
    const tabs = ref(["待发货", "已发货", "已完成"]);
    
    return {
      state,
      tabs
    }
  }
});
</script>

<style scoped lang="scss">
@import '@/static/styles/variables.scss';  
  
.tab-content {
  padding: 30rpx;
}

.order-list {
  margin-top: 60rpx;
  
  .order-item {
    margin-bottom: 40rpx;
    border-bottom: 1px solid #eee;
    padding-bottom: 40rpx;
    
    &:last-child {
      border-bottom: none;
    }
    
    .thumb-box {
      width: 180rpx;
      height: 170rpx;
      margin-right: 20rpx;
      
      > image {
        width: 100%;
        height: 100%;
      }
    }
    
    .goods-info {
      display: flex;
      
      .title {
        font-weight: bold;
        font-size: 32rpx;
      }
      
      .count {
        color: #999;
        margin: 20rpx 0 10rpx;
      }
      
      .price {
        color: #999;
        
        > text {
          color: $primaryColor;
          font-weight: bold;
        }
      }
    }
  
    .btm-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      
      .money-box {
        display: flex;
        align-items: flex-end;
        
        > text:first-child {
          font-size: 28rpx;
        }
        
        > text:last-child {
          color: $primaryColor;
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      
      .btn-box {
        display: flex;
        margin-top: 20rpx;
        
        button {
          height: 60rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>
